<template>
  <div class="vh100 out">
    <nav-top Licon="more"
             @callback="navCb"
             Ricon="search"></nav-top>
    <div class="school">
      <div class="header">
        <div class="blue flex lh1">
          <div class="count flex-1 tac"
               v-for="(count, i) in counts"
               :key="i">
            <div class="num">{{info[count.prop] || 0}}</div>
            <div class="text">{{count.text}}</div>
          </div>
        </div>
        <div class="white por"
             @click="toAddSch">申请开通学校<i class="next abs-m"></i></div>
      </div>
      <div class="body flex bsb">
        <div class="tabs ova h100 tac"
             v-if="userInfo.proxy_type === 1">
          <div @click="proxyChange(proxy.id)"
               class="proxy transition wsnw tac"
               :class="{active: activeProxy === proxy.id}"
               v-for="(proxy, i) in proxyList"
               :key="i">{{proxy.name}}
          </div>
        </div>
        <div class="list flex-1 ovs">
          <div class="item flex"
               v-for="(item, i) in listHeader">
            <template v-if="item.type === 'title'">
              <div class="label wsnw flex-1">他的学校（{{pInfo.school_num}}所）：</div>
            </template>
            <template v-else>
              <div class="label wsnw flex-1">{{item.label || ''}}</div>
              <div class="value wsnw">￥{{(pInfo[item.prop] || 0) | formatNum}}</div>
            </template>
          </div>
          <load-more ref="loadMore"
                     class="school-list"
                     @bottom="more"
                     :no-data="noData">
            <div class="item flex"
                 v-for="(item, i) in list"
                 :key="i"
                 @click="toDetail(item)">
              <div class="label wsnw flex-1">{{item.name || ''}}</div>
              <div class="value wsnw">￥{{(item.pay_sum || 0) | formatNum}}</div>
            </div>
            <div v-if="!list.length"
                 class="tips">暂无学校</div>

          </load-more>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'School',
  computed: {
    ...mapGetters(['userInfo'])
  },
  filters: {
    formatNum(n) {
      return parseFloat(n).toFixed(2)
    }
  },
  data() {
    return {
      counts: [
        { text: '学校', value: '25', prop: 'school_num' },
        { text: '老师', value: '280', prop: 'teacher_num' },
        { text: '班级', value: '166', prop: 'class_num' },
        { text: '学生', value: '8885', prop: 'student_num' }
      ],
      activeProxy: '',
      proxyList: [],
      listHeader: [
        { label: '总业绩', value: '12457.00', prop: 'total_income' },
        { label: '线上付款', value: '12457.00', prop: 'link_income' },
        { label: '后台登付', value: '12457.00', prop: 'back_income' },
        { type: 'title' }
      ],
      info: {},
      pInfo: {},
      params: {},
      list: [],
      curr: 0,
      noData: false,
      limits: 10
    }
  },
  created() {},
  mounted() {
    if (this.userInfo.proxy_type * 1 === 1) {
      this.Http.getProxyList({
        proxy_id: this.userInfo.proxy_id,
        proxy_type: this.userInfo.proxy_type,
        all: 1
      })
        .then(res => {
          //   console.log(res);
          this.proxyList = res
          if (res.length) {
            this.activeProxy = res[0].id
          }
          this.curr = 1;
          this.getList(this.$refs.loadMore.next)
        })
        .catch(console.log)
    } else {
      this.activeProxy = this.userInfo.proxy_id
    }
    this.Http.teamStatistics({
      proxy_id: this.userInfo.proxy_id
    })
      .then(res => {
        this.info = res
      })
      .catch(this.$err)
  },
  methods: {
    navCb(type) {
      switch (type) {
        case 'more':
          this.showUserPopup()
          break
        case 'search':
          this.$router.push({
            name: 'SchoolSearch'
          })
          break
      }
    },
    toAddSch() {
      this.$router.push({
        name: 'AddSome',
        params: {
          type: 'sch',
          sid: 'sch'
        }
      })
    },
    proxyChange(id) {
      this.activeProxy = id
      this.curr = 1
      this.getList()
    },
    toDetail(item) {
      this.$router.push({
        name: 'SchoolDetail',
        params: {
          id: item.id
        }
      })
    },
    more(fn) {
        // console.log(this.activeProxy);
      if (!this.activeProxy) return
      this.curr++
      this.getList(fn)
    },
    getList(init) {
      let params = { ...this.params }
      params = {
        proxy_id: this.activeProxy,
        curr: this.curr,
        limits: this.limits
      }
      this.Http.getSchoolList(params)
        .then(res => {
          this.pInfo = res
          if (this.curr === 1) {
            this.list = []
          }
          this.list.push(...res.list)
          this.noData = this.list.length >= res.school_num;
        //   console.log(this.list.length, res.school_num);
        //   console.log(res);
        //   return;
          init && init()
        })
        .catch(this.$err)
    }
  }
}
</script>

<style scoped lang="less">
.out {
  background-color: #f7f8fa;
}

.school-list {
  height: calc(100% - 330px);
}
.tips {
  font-size: 32px;
  text-align: center;
  padding: 40px;
}

.header {
  margin-bottom: 40px;
  padding: 0 36px;
  .blue {
    padding: 50px 0 88px;
    background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
    box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
    border-radius: 20px;
  }
  .count {
    height: 60px;
    color: #fff;
    font-size: 24px;
    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
    .num {
      margin: -16px 0 24px;
      font-size: 36px;
      font-weight: bold;
    }
  }
  .white {
    margin: -54px 0 0;
    padding: 0 36px;
    color: #222;
    font-size: 30px;
    line-height: 90px;
    background: #fff;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    .next {
      right: 36px;
      width: 15px;
      height: 25px;
      transform: translateY(-50%) rotateY(180deg);
      background: url(../../../assets/images/icon/ic_arrow_back.png) no-repeat
        center center / 100% 100%;
    }
  }
}

.body {
  margin: 0 30px;
  height: calc(100vh - 398px);
  background: #fff;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  line-height: 80px;
  font-size: 30px;
  color: #999;
  .tabs {
    min-width: 160px;
    color: #222;
    border-right: solid 1px #e8e8e8;
  }
  .proxy {
    padding: 0 10px;
    border-right: transparent solid 2px;
    &.active {
      border-color: #2d8cf0;
      color: #2d8cf0;
      font-size: 34px;
      font-weight: 500;
    }
  }
  .item {
    padding-left: 36px;
    border-bottom: 1px solid #e8e8e8;
  }
  .value {
    width: 190px;
    color: #222;
  }
  .label:not(:only-child) {
    font-size: 24px;
  }
}
</style>